<template>
  <div class="main">
		<div class="imgHome">
		</div>
    <el-container>
      <el-header>
        <HomeMessage />
      </el-header>
      <el-main>
        <router-view v-loading="store.state.isLoading"></router-view>
        <div class="message_end">

        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script lang="ts">
import HomeMessage from "./model/homeMessage.vue";
import { ElContainer, ElImage } from "element-plus";
import { defineComponent } from "vue";
import { useStore } from "@/store/index"
export default defineComponent({
  name: "Home",
  components: {
    ElContainer,
    ElImage,
    HomeMessage,
  },
  setup() {
    const store = useStore();
    return { store };
  },
});
</script>

<style lang="less" scope>
.main {
  width: 100%;
  height: 100%;
  position: relative;
	.imgHome{
		position: absolute;
		width: 100%;
		height: 550px;
    background: url("/src/image/home/home.webp") no-repeat center center;
    background-size: cover;
	}
  .el-header,.el-main{
    padding: 0;
    width: 100%;
  }
	.el-main{
    box-sizing: border-box;
    height: 100%;
    padding: 40px 20px 0 20px;
		position: relative;
		z-index: 2;
	}
  .message_end {
    width: 100%;
    height: 300px;
    background: #333333;
  }
}
</style>
